<!--
 * @Author: wangding
 * @Date: 2020-11-10 09:38:19
 * @LastEditTime: 2021-01-27 12:04:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\sn\export.vue
-->
<template>
    <div>
        <el-dialog
        :title="$t('export')"
        :visible="newVisibleFlow"
        class="el-dialog-sm"
        @close="()=>{$store.commit('setNewVisibleFlow',false)}"
        :close-on-click-modal='false'
        >
            <el-row :gutter="20">
                <el-col :span="17" :offset="3">
                    <el-form ref="form" :model="form" label-width="160px" >
                        <el-form-item :label="$t('opttask.createTime')" prop="createDateStart" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-date-picker
                            v-model="form.createDateStart"
                            type="date"
                            :placeholder="$t('selectDate')"
                            value-format='yyyy-MM-dd'
                            :clearable='true'
                            :picker-options="pickerOptionsStatus"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="" prop="createDateEnd" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-date-picker
                            v-model="form.createDateEnd"
                            type="date"
                            :placeholder="$t('selectDate')"
                            value-format='yyyy-MM-dd'
                            :clearable='true'
                            :picker-options="pickerOptionsEnd"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item :label="$t('sn.snExport.snCount')" prop="size" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.size" :placeholder="$t('pleaseInput')"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setNewVisibleFlow',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    data() {
        return {
            form:{
               createDateStart:'',
               createDateEnd:'',
               size:'',
            },
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
        };
    },
    computed: {
        newVisibleFlow(){
            return this.$store.state.sysStore.newVisibleFlow
        },
        pickerOptionsStatus(){ //禁用今天之后的时间
        let that = this
            return {
                disabledDate(time) {
                    return time.getTime() > new Date(that.form.createDateEnd).getTime() || time.getTime() > Date.now() 
                },
            }
        },
        pickerOptionsEnd(){ //禁用今天之后的时间
            let that = this
            return {
                disabledDate(time) {
                    return time.getTime() < new Date(that.form.createDateStart).getTime()-86400000 || time.getTime() > Date.now() 
                },
            }
            // that.searchData.startTime
        },
    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.windowOpen()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        windowOpen(){
            let url = `/devgateway/exportGateWay?createDateStart=${this.form.createDateStart}&createDateEnd=${this.form.createDateEnd}&size=${this.form.size}`
            this.comm.windowOpen(url)
            this.$store.commit('setNewVisibleFlow',false)
        }
    },
};
</script>

<style  lang="less" scoped>

</style>
